import React from 'react';
import { Menu, Image, Dropdown, Button } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import items from './menu/menuList';
import style from "./index.module.css";
import {
  useNavigate,
  Outlet
} from "react-router-dom";
import AuditNotification from './rightPages/AuditNotification'


import loginLog from '@/assets/icon_logo.png';
import operating from '@/assets/operating.png';
import timer from '@/assets/timer.png';

export default function HomePage() {
  const navigate = useNavigate();
  const menu = (
    <Menu>
      <Menu.Item key="0">选项 1</Menu.Item>
      <Menu.Item key="1">选项 2</Menu.Item>
    </Menu>
  );
  function handleClick(e) {
    navigate(e.key);
  }

  return (
    <div className={style.container}>
      <div className={style.headerContainer}>
        <div className={style.headerLeftContainer}>
          <Image className={style.logo} src={loginLog}></Image>
          <Image className={style.statusLabel} src={operating}></Image>
        </div>
        <div className={style.headerRightContainer}>
          <Image className={style.timerIcon} src={timer}></Image>
          <Dropdown overlay={menu}>
            <Button>
              营业状态设置
            </Button>
          </Dropdown>
          <Dropdown overlay={menu}>
            <Button>
              管理员 <DownOutlined />
            </Button>
          </Dropdown>
        </div>

      </div>
      <div className={style.homePageContainer}>

        <div className={style.leftContainer}>
          <Menu
            className={style.menu}
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            mode="inline"
            theme="dark"
            items={items}
            onClick={handleClick}
          >
          </Menu>

        </div>
        <div className={style.rightContainer}>
          <Outlet className={style.outlet} />
          <AuditNotification />
        </div>
      </div >
    </div>
  )
}
